<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <li>
        <input type="checkbox" checked="false" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>
    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      <a href="javascript:;" id="remove">删除</a>
      <input type="text" id="newInfo" />
      <a href="javascript:;" id="add">添加</a>
    </footer>
  </section>
  <script>
    var data = [
      {
        id: 0,
        title: "残酷月光 - 费启鸣",
        checked: true,
        collect: true
      }, {
        id: 1,
        title: "兄弟 - 艾热",
        checked: false,
        collect: false
      }, {
        id: 2,
        title: "毕生 - 夏增祥",
        checked: false,
        collect: true
      }, {
        id: 3,
        title: "公子向北去 - 李春花",
        checked: false,
        collect: false
      }, {
        id: 4,
        title: "战场 - 沙漠五子",
        checked: true,
        collect: false //是否收藏 true 收藏 false 没有收藏
      }
    ];


    let isCheckAll=data=>data.every(item=>item.checked);
    
    //数据渲染
    function renderDom(data){
      //利用事件委派抓取ul
      let listEle=document.querySelector('#list');
      //清空数据
      listEle.innerHTML='';
      //循环data渲染数据
      data.forEach((item,key)=>{
        //createElement 创建子节点
        let liEle=document.createElement('li');

        liEle.innerHTML=`
        <input type="checkbox" ${item.checked?'checked':''} />
        <span>${item.title}</span>
        ${item.collect?'<a href="javascript:;" class="cancelCollect">取消收藏</a>':'<a href="javascript:;" class="collect">收藏</a>'}
        <a href="javascript:;" class="remove">删除</a>
        `;

        //用事件委托给li绑定事件
        liEle.onclick=function(e){

          //点击收藏
          if(e.target.classList.contains("collect")){
            data[key].collect=true;
            renderDom(data);
          }

          //点击取消收藏
          if(e.target.classList.contains("cancelCollect")){
            data[key].collect=false;
            renderDom(data);
          }

          //删除li
          if(e.target.classList.contains("remove")){
            data.splice(key,1);

            document.querySelector('#checkAll').checked=data.length&&isCheckAll(data);

            renderDom(data);
          }


          //点击checkbox事件 
          if(e.target.nodeName==="INPUT"){

            // 改变数据里的checked 状态
            //1.和数据状态同步；
            data[key].checked=e.target.checked;
            // 2.根据数据判断是否需要全选或者非全选；
            document.querySelector('#checkAll').checked=data.length&&isCheckAll(data);
          }
        }

        //每次渲染完一个li添加进去
        listEle.appendChild(liEle);

      })
    }
    renderDom(data);


    // 点击全选的时候 所有的checkbox都需要全选  
    document.querySelector('#checkAll').onclick=function(){
      data.forEach(item=>{
        item.checked=this.checked;
      })
      renderDom(data)
    }


    //删除选中的
    document.querySelector('#remove').onclick=function(){
      data=data.filter(item=>!item.checked);
      //filter过滤，返回的是过滤完的东西
      //此时true的取反都不会返回，false的取反为true被过滤返回
      console.log(data);
      renderDom(data);
    }

    //添加
    let inputEle=document.querySelector('#newInfo');
    document.querySelector('#add').onclick=function(){
      let title=inputEle.value;
      if(title.trim()===''){
        alert('不能输入空的');
        return;
      }

      let obj={
        id:data.length,
        title:title,
        checked:false,
        collect:false
      }
      data.push(obj);
      inputEle.value='';
      renderDom(data);
    }
  </script>
</body>

</html>